#header {
      /* background-color: #333; */
	  background: #1d213d;
      color: #fff;
      padding: 10px;
      text-align: center;
	  display: flex; /* 使用flex布局 */
	  align-items: center; /* 垂直居中 */
    }

	header img{
		height: 100%; /* 图片高度与header高度相同 */
		width: 400px;
		padding: 0 10px; /* 可以根据需要调整图片与标题之间的间距 */
	}
	header h1 {
	    flex: 0.63; /* 让标题占据剩余的空间，实现标题居中 */
	    text-align: center; /* 水平居中 */
	    color: #fff; /* 设置标题颜色为白色 */
	    margin: 0; /* 去掉默认的margin */
	}



    .container {
     /* max-width: 1200px; */
      margin: auto;
		padding-bottom: 11%;
		padding-left: 8%;
		padding-right: 8%;
	  overflow: auto;
    }
	/* 自定义滚动条样式 */
	.container {
	  scrollbar-width: thin; /* "auto" 或 "thin"，适用于 Firefox */
	  scrollbar-color: darkgray lightgray; /* 滚动条颜色 */
	}
	.container::-webkit-scrollbar {
	  width: 10px; /* 设置滚动条宽度 */
	}
	.container::-webkit-scrollbar-track {
	  background: lightgray; /* 设置滚动条轨道的背景色 */
	}
	.container::-webkit-scrollbar-thumb {
	  background-color: darkgray; /* 设置滚动条手柄颜色 */
	  border-radius: 5px; /* 设置滚动条手柄的圆角 */
	}

    .search {
		margin-bottom: 20px;
		width: 100%;
		flex: 0.75; /* 让标题占据剩余的空间，实现标题居中 */
		text-align: center; /* 水平居中 */
    }

    .search input[type="text"] {
      padding: 10px;
      width: 100%;
      max-width: 600px;
	  border-radius: 5px;
    }

	/* 当鼠标悬停在输入框上时的样式 */
	#content:hover {
		background-color: #f0f0f0; /* 设置灰色背景 */
		border: 1px solid #ccc; /* 设置边框 */
	}
	#query:hover{
		background-color: #e6e5e6;
	}

	#query {
		padding: 5px;
		margin-top: 10px;
		width: 100%;
		max-width: 100px;
		background-color: #fafafa;
		color: #fff;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		vertical-align: bottom;
	}

	#resourcesdiv h2{
		display: block;
		font-size: 1.5em;
		margin-block-start: 0.83em;
		margin-block-end: 0.83em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bold;
	}

    .resources {
      display: grid;
      /*grid-template-columns: repeat(1, 1fr);*/
      grid-gap: 20px;
    }

    .resource {
	  border-radius: 15px;
      background-color: #ffffff;
      padding: 10px;
    }

    .free-resources {
      margin-bottom: 40px;
		display: grid;
		justify-items: center
    }

    .paid-resources {
      margin-bottom: 40px;
    }

    footer {
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  padding: 10px 0;
      background-color: #1d213d;
      color: #fff;
      text-align: center;
      padding: 10px;
    }

    /* Media Queries for Mobile Devices */
    @media (min-width: 768px) {
      .resources {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .resources {
        grid-template-columns: repeat(5, 1fr);
      }
    }
	.resource {
	  display: grid; /* 使用 Grid 布局 */
	  align-content: center;
		transition: transform 0.3s ease;
	  /* grid-template-columns: auto 1fr; */ /* 左侧宽度自适应图片大小，右侧占据剩余空间 */
	  /* grid-gap: 20px; *//* 设置网格间距 */
	}

	.resource:hover {
		transform: scale(0.9);
	}

	.resource img {
	  width: 100%; /* 图片宽度最大为父元素宽度 */
	}
	
	.resource .content {
	  /* 不需要额外设置，内容部分会自动占据剩余空间 */
	}
	
	.resource h3 {
	  margin-top: 0; /* 去除标题顶部的默认间距 */
	}
	
	.resource p {
		/*超出部分显示...*/
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}



	.pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	/*.pagination a {
		color: #333;
		padding: 8px 16px;
		text-decoration: none;
		border: 1px solid #ccc;
		margin: 0 5px;
		cursor: pointer;
	}
*/
	p{
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;

	}

	.pagination a.active {
		background-color: #4CAF50;
		color: white;
	}
	/*.pagination div:hover {
		background-color: #e6e6e6;
	}*/
	.pagination input {
		width: 40px;
		border: 1px solid #ccc;
		padding: 5px;
		text-align: center;
	}

	.pagination input[type="button"] {
		cursor: pointer;
	}
	#pageTotal{
		display: flex;
		align-items:center;
	}

	.coverimg{
		max-height: 200px;
		max-width: 400px;
	}

	.text-sm{
		font-size: 16px;
	}

	.res-info{
		margin-top: 3px;
		font-size: 14px;
	}

	/*悬浮工具区域样式*/
	#floating-block {
		position: fixed;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		background-color: #fff;
		user-select: none;
		/*border-radius: 5px;*/
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		cursor: grab;
	}

	/*悬浮工具区域列表样式*/
	.tool-div{
		padding: 10px;
		cursor: pointer;
	}

	.tool-div:hover{
		background: #e2e5e3;
	}